<script setup>
// 1. 引入函数
import { ref, computed } from 'vue';

const score = ref('')

const addScore = () => {
    scoreList.value.push(Number(score.value))
}

// 学生成绩列表
const scoreList = ref([10, 20, 80, 90, 100, 60, 70, 50, 40, 30])

// 有不及格的列表
// 2. computed 计算属性调用函数时放入一个回调函数, 这个回调函数的返回值, 就是这个计算属性的结果
const failList = computed(()=>{
    return scoreList.value.filter(item=>item<60)
})
// 及格列表
const commonList = computed(()=>{
    return scoreList.value.filter(item=>item>=60)
})
// 优秀列表
const goodList = computed(()=>{
    return scoreList.value.filter(item=>item>=90)
})

</script>

<template>
    <input type="text" v-model="score">
    <button @click="addScore">添加成绩</button>
    <div>
        <h2>学生成绩表</h2>
        {{ scoreList }}
        <h2>不及格的列表</h2>
        {{ failList }}
        <h2>及格列表</h2>
        {{ commonList }}
        <h2>优秀列表</h2>
        {{ goodList }}
    </div>
</template>
  
<style lang="less"></style>
  